<template>
    <div>
         <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="猜灯谜"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>
        <!-- 内容 -->
        <div class="giessBox">
            <div v-for="(item,index) in guessList" :key="index">
            
            <p>题目：{{item.riddle}}</p>
            <p>提示：{{item.type}}</p>
            
            <label for="">输入你的答案：</label>
            <input type="text" v-model="mineanswer" style="width:140px">&nbsp;&nbsp;
            <button @click="sure">确认</button>
            

            <div class="answerBox">
                <button @click="seeTip">查看答案</button>&nbsp;&nbsp;
                <p v-if="flag">答案：{{item.answer}}</p>
            </div>
            <div class="nextBox">
                <button  @click="next" style="width:200px">下一题</button>
            </div>
            
        </div>
        
    </div>
        </div>
        
    
</template>
<script>
import { guess } from '../api/api'
import { Toast } from 'vant';

export default {
    name:'guess',
    data(){
        return{
            guessList:"",
            mineanswer:"",
            answer:"",
            flag:false,

        }
    },
    created(){
        guess().then(res=>{
            console.log(res);
            this.guessList=res.newslist
            this.answer=this.guessList[0].answer
        })
    },
    methods: {
        next(){
            this.flag=false
            guess().then(res=>{
            console.log(res);
            this.guessList=res.newslist
            this.answer=this.guessList[0].answer
            this.mineanswer=""
        })
        },
        sure(){
            console.log(this.answer);
            console.log(this.mineanswer);
            if(this.answer==this.mineanswer){
                console.log(3453466);
                Toast({
                    message: '回答正确',
                    icon: 'success',
                });
            }else{
                Toast({
                    message: '回答错误',
                    icon: 'cross',
                });
            }
        
        },
        seeTip(){
            this.flag=true;
        },
         onClickLeft() {
      this.$router.back;
      window.history.go(-1);
    },
    onClickRight() {}
        
    },
}
</script>
<style scoped lang="less">
.giessBox {
    margin: auto;
    width: 88%;
    // background-color: red;
}
.nextBox {
    padding: 18px;
    text-align: center;
}
.answerBox {
    padding: 18px 0 0;
}
// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
</style>
